<template>
  <div>
    <Layout class="app-frame" v-if="!loading" :siderCollapsed="siderCollapsed" siderFixed>
      <Sider theme="dark">
        <div class="app-menu">
          <div class="app-logo" style="background:white; height: 54px;">
            <router-link to="/">
              <span class="app-logo-icon"
                    style="background: url(img/logo.png);margin-left:8px; width:45px;height:45px; background-size: 100% 100%;"></span>
              <span class="app-logo-text" style="color: #3788ee;">{{ title }}</span>
            </router-link>
          </div>
          <div :class="{menu_expand:!siderCollapsed}">
            <Menu :datas="user.menu" :inlineCollapsed="siderCollapsed" @select="menuSelect" ref='menu'
                  className="h-menu-dark" accordion></Menu>
            <div class="app-menu-mask" @click="siderCollapsed=true"></div>
          </div>
        </div>
      </Sider>
      <Layout headerFixed>
        <HHeader theme="white">
          <div class="app-header" style="display: flex;">
            <div style="width:50px;float:left;">
              <Button :icon="siderCollapsed ? 'icon-align-right':'icon-align-left'" size="l" noBorder class="font20"
                      @click="siderCollapsed=!siderCollapsed"></Button>
            </div>
            <!-- 顶部模块菜单 -->
            <div style="flex: 1" class="top-menu-pc">
              <Breadcrumb :datas="breadcrumb"></Breadcrumb>
            </div>

            <div class="float-right app-header-info">
              <DropdownMenu className="app-header-dropdown" trigger="hover" offset="0,5" :width="150"
                            placement="bottom-end" :datas="userMenu" @onclick="userMenuClick">
                <span>{{ user.name }}({{ user.username }})</span>
              </DropdownMenu>
            </div>
          </div>
        </HHeader>
        <Content>
          <div class="app-frame-content" style="height:100%">
            <!-- <keep-alive> -->
            <transition name="fade">
              <router-view/>
            </transition>
            <!-- </keep-alive> -->
          </div>
        </Content>
      </Layout>
    </Layout>
    <Modal v-model="changePwd" middle hasDivider>
      <div slot="header">修改密码</div>
      <div v-width="300">
        <Form
            :labelWidth="110"
            ref="pwdForm"
            :rules="pwdRules"
            :model="pwds"
            class="title-suffix"
        >
          <FormItem label="旧密码" prop="OldPassword" required>
            <input type="password" v-model="pwds.OldPassword"/>
          </FormItem>
          <FormItem label="新密码" prop="Password" required>
            <input type="password" v-model="pwds.Password"/>
          </FormItem>
          <FormItem label="重复新密" prop="ConfirmPassword" required>
            <input type="password" v-model="pwds.ConfirmPassword"/>
          </FormItem>
        </Form>
      </div>
      <div slot="footer">
        <Button @click="updatePwd">确定</Button>
      </div>
    </Modal>
  </div>
</template>
<script>
import {ajax} from 'framework'
import {mapState} from 'Vuex'

function findPath(data, name) {
  for (let it of data) {
    if (it.key == name) {
      return [{title: it.title}]
    }
    if (it.children) {
      let ret = findPath(it.children, name)
      if (ret.length > 0) {
        return [{title: it.title}, ...ret]
      }
    }
  }
  return []
}
let title=document.title||'Easy Admin'
export default {
  name: "Index",
  data() {
    return {
      title:title,
      changePwd: false,
      appName: '',
      userName: '',
      loading: false,
      siderCollapsed: false,
      currentTop: {},
      breadcrumb: [],
      userMenu: [
        {key: 'pwd', title: '修改密码', icon: 'h-icon-lock'},
        {key: 'logout', title: '退出登录', icon: 'h-icon-outbox'}
      ],
      pwds: {
        OldPassword: "",
        Password: "",
        ConfirmPassword: ""
      },
      pwdRules: {
        rules: {
          Password: {
            maxLen: 18,
            minLen: 5
          }
        },
        combineRules: [{
          refs: ['Password', 'ConfirmPassword'],
          valid(a, b) {
            if (a != b) {
              return "两次输入密码必须相同";
            }
            return true;
          }
        }]
      }
    }
  },
  computed: {
    ...mapState(['user'])
  },
  watch: {
    $route() {
      this.initSelect()
    }
  },
  mounted() {
    this.initSelect()
  },
  methods: {
    initSelect() {
      let name = this.$route.name;
      if (name) {
        this.$refs.menu.select(name);
        let dt = findPath(this.user.menu, name)
        this.breadcrumb.splice(0, this.breadcrumb.length, ...dt)
      } else {
        this.breadcrumb.splice(0, this.breadcrumb.length)
      }
    },
    userMenuClick(data) {
      if (data == "logout") {
        ajax.get('system/logout').then((r) => {
          location.reload()
        })
      } else if (data == "pwd") {
        this.pwds = {
          OldPassword: "",
          Password: "",
          ConfirmPassword: ""
        }
        this.changePwd = true
      }
    },
    menuSelect(m) {
      if (this.$route.name != m.key) {
        this.$router.push({name: m.key})
      }
    },
    updatePwd() {
      let validResult = this.$refs.pwdForm.valid();
      if (validResult.result) {
        if(this.pwds.Password!=this.pwds.ConfirmPassword){
          this.$Message("两次输入的密码不一致");
          return
        }
        ajax.post("system/changePassword", this.pwds).then(r => {
          this.$Message(r.data)
          this.changePwd=false
        })
      }
    }
  }
}
</script>
<style lang="less">
.app-frame{
  .app-menu{
    display: flex;
    flex-direction: column;
    height: 100%;
    .h-menu{
      margin-top: 10px;
    }
  }
  .app-logo{
    margin-bottom:0
  }
  .menu_expand{
    position: relative;
    overflow-y: auto;
    flex: 1;
    .h-menu{
      position: absolute;
    }
  }
}
</style>
